import streamlit as st

def apply_common_styles():
    """
    应用统一的页面样式
    """
    st.markdown("""
    <style>
    /* 隐藏Streamlit默认元素 */
    #MainMenu {visibility: hidden;}
    footer {visibility: hidden;}
    header {visibility: hidden;}
    .stDeployButton {display:none;}
    
    /* 主容器样式 */
    .main .block-container {
        padding-top: 1rem;
        padding-bottom: 0rem;
        max-width: 100%;
    }
    
    /* 页面标题统一样式 */
    .page-title {
        font-size: 2.5rem;
        font-weight: bold;
        color: #1976d2;
        text-align: center;
        margin-bottom: 2rem;
        padding: 1rem;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border-radius: 12px;
        border: 1px solid #dee2e6;
    }
    
    /* 统一的指标卡片样式 */
    .metric-card {
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        padding: 1.5rem;
        text-align: center;
        transition: transform 0.2s, box-shadow 0.2s;
        border: 1px solid #e0e0e0;
    }
    
    .metric-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    .metric-value {
        font-size: 2rem;
        font-weight: 700;
        color: #1976d2;
        margin-bottom: 0.5rem;
    }
    
    .metric-label {
        color: #666;
        font-size: 0.9rem;
        font-weight: 500;
    }
    
    /* 统一的内容卡片样式 */
    .content-card {
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 12px;
        padding: 1.5rem;
        margin: 1rem 0;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: transform 0.2s, box-shadow 0.2s;
    }
    
    .content-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    
    /* 统一的表格样式 */
    .dataframe {
        border: none !important;
    }
    
    .dataframe thead th {
        background-color: #1976d2 !important;
        color: white !important;
        font-weight: 600 !important;
        border: none !important;
    }
    
    .dataframe tbody tr:nth-child(even) {
        background-color: #f8f9fa !important;
    }
    
    .dataframe tbody tr:hover {
        background-color: #e3f2fd !important;
    }
    
    /* 统一的按钮样式 */
    .stButton > button {
        background-color: #1976d2;
        color: white;
        border: none;
        border-radius: 8px;
        padding: 0.5rem 1.5rem;
        font-weight: 500;
        transition: all 0.3s ease;
    }
    
    .stButton > button:hover {
        background-color: #1565c0;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(25, 118, 210, 0.3);
    }
    
    /* 统一的选择框样式 */
    .stSelectbox > div > div {
        background-color: white;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
    }
    
    /* 统一的侧边栏样式 */
    .css-1d391kg {
        background-color: #f8f9fa;
        border-right: 1px solid #e0e0e0;
    }
    
    /* 统一的分隔线样式 */
    hr {
        border: none;
        height: 1px;
        background: linear-gradient(to right, transparent, #e0e0e0, transparent);
        margin: 2rem 0;
    }
    
    /* 状态标签样式 */
    .status-pending { 
        color: #ff9800; 
        font-weight: 600;
    }
    .status-processing { 
        color: #2196f3; 
        font-weight: 600;
    }
    .status-completed { 
        color: #4caf50; 
        font-weight: 600;
    }
    .status-cancelled { 
        color: #f44336; 
        font-weight: 600;
    }
    
    /* 优先级标签样式 */
    .priority-high {
        background: #ffebee;
        color: #c62828;
        padding: 0.25rem 0.75rem;
        border-radius: 12px;
        font-size: 0.8rem;
        font-weight: 500;
    }
    
    .priority-medium {
        background: #fff3e0;
        color: #ef6c00;
        padding: 0.25rem 0.75rem;
        border-radius: 12px;
        font-size: 0.8rem;
        font-weight: 500;
    }
    
    .priority-low {
        background: #e8f5e8;
        color: #2e7d32;
        padding: 0.25rem 0.75rem;
        border-radius: 12px;
        font-size: 0.8rem;
        font-weight: 500;
    }
    
    /* 响应式设计 */
    @media (max-width: 768px) {
        .page-title {
            font-size: 2rem;
            padding: 0.75rem;
        }
        
        .metric-card {
            padding: 1rem;
        }
        
        .content-card {
            padding: 1rem;
        }
    }
    
    /* 图表容器样式 */
    .plotly-graph-div {
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    /* 成功消息样式 */
    .stSuccess {
        background-color: #e8f5e8;
        border: 1px solid #4caf50;
        border-radius: 8px;
    }
    
    /* 警告消息样式 */
    .stWarning {
        background-color: #fff3e0;
        border: 1px solid #ff9800;
        border-radius: 8px;
    }
    
    /* 错误消息样式 */
    .stError {
        background-color: #ffebee;
        border: 1px solid #f44336;
        border-radius: 8px;
    }
    
    /* 信息消息样式 */
    .stInfo {
        background-color: #e3f2fd;
        border: 1px solid #2196f3;
        border-radius: 8px;
    }
    </style>
    """, unsafe_allow_html=True)

def create_page_title(title, icon=""):
    """
    创建统一格式的页面标题
    """
    st.markdown(f'<div class="page-title">{icon} {title}</div>', unsafe_allow_html=True)

def create_metric_card(value, label, delta=None):
    """
    创建统一格式的指标卡片
    """
    delta_html = f'<div style="color: {"#4caf50" if delta and "+" in str(delta) else "#f44336"}; font-size: 0.8rem; margin-top: 0.25rem;">{delta}</div>' if delta else ""
    
    return f"""
    <div class="metric-card">
        <div class="metric-value">{value}</div>
        <div class="metric-label">{label}</div>
        {delta_html}
    </div>
    """

def create_content_card(content, title=None):
    """
    创建统一格式的内容卡片
    """
    title_html = f'<h3 style="color: #1976d2; margin-bottom: 1rem;">{title}</h3>' if title else ""
    
    return f"""
    <div class="content-card">
        {title_html}
        {content}
    </div>
    """

def get_status_class(status):
    """
    根据状态返回对应的CSS类
    """
    status_map = {
        '待处理': 'status-pending',
        '处理中': 'status-processing', 
        '已完成': 'status-completed',
        '已取消': 'status-cancelled',
        'pending': 'status-pending',
        'processing': 'status-processing',
        'completed': 'status-completed',
        'cancelled': 'status-cancelled'
    }
    return status_map.get(status.lower(), 'status-pending')

def get_priority_class(priority):
    """
    根据优先级返回对应的CSS类
    """
    priority_map = {
        '高': 'priority-high',
        '中': 'priority-medium',
        '低': 'priority-low',
        'high': 'priority-high',
        'medium': 'priority-medium', 
        'low': 'priority-low'
    }
    return priority_map.get(priority.lower(), 'priority-medium')